let array = [];
$(document).ready(function(){
    $.get('/service/category_list',function(data){
        array = data;
        initCategoryList();
    });
});

let mark = $('#mark');
function initCategoryList(){
    for(let i = 0; i < array.length; i++){
        let span = document.createElement('span');
        span.append(document.createTextNode(array[i].categoryName));
        span.classList.add('item');
        span.style.left = (i <= 3) ? (i * 120) + 'px' : (i * 120) + 130 + 'px';
        if(i == 3) {
            span.style.width = '250px';
            span.style.fontSize = '30px';
            $('#note').text(array[i].note);
            $.get('/service/category_product?categoryId=' + array[i].categoryId,function(data){
                for(let i = 0; i < 14;i++){
                    if(i < 4) $($('.recommend')[i]).attr({
                            'src' : data[i].defaultImg,
                            'title' : data[i].productName,
                        });
                    else $($('.productImg')[i - 4]).attr({
                            'src' : data[i].defaultImg,
                            'title' : data[i].productName,
                        });
                    $($('.productName')[i]).text(data[i].productName) , $($('.price')[i]).text(data[i].price.toFixed(2));
                    $($('.link')[i]).attr('href','/service/product_details?productId=' + data[i].productId);
                }
            });
            document.body.style.background = 'url(' + array[i].defaultImg + ") no-repeat rgb(239,242,247)";
            document.body.style.backgroundSize = '100%';
        }
        mark.append(span);
    }
    bindClick();
}

$('#left').on('click',() => {toRightMove();});

$('#right').on('click',() => {toLeftMove();});

function bindClick(){
    let item = $('.item');
    for(let i = 0; i < item.length; i++){
        $(item[i]).on('click',function(){
           let discount = (i >= 3) ? i - 3 : 3 - i;
           let interval = setInterval(() => {
               if(--discount <= 0) clearInterval(interval);
               if(i < 3) toRightMove();
               else toLeftMove();
           },100);
        })
    }
}


function toLeftMove(){
    array.push(array.shift());//将数组中的第一个元素添加到数组的末尾
    for(let i = 0; i < array.length; i++){
        if(i > 3){
            if(i == 4){
                $($('.item')[i]).css({
                    'font-size' : '30px',
                    'left' : (i - 1) * 120 + 70 + 'px',
                });
            }else {
                $('.item')[i].style.left = (i - 1) * 120 + 130 + 'px';
            }
        }else if(i == 3) {
            $($('.item')[i]).css({
                'font-size' : '20px',
                'left' : (i - 1) * 120 - 80 + 'px',
            });
        }else $('.item')[i].style.left = (i - 1) * 120 + 'px';
    }
    setTimeout(() => {$('.item').remove();initCategoryList();},600);
}


function toRightMove(){
    array.unshift(array.pop()); //将最后一个元素添加到数组的开头;
    for(let i = array.length - 1; i >= 0; i--){
        if(i < 3) {
            if (i == 2) {
                $($('.item')[i]).css({
                    'font-size': '30px',
                    'left': (i + 1) * 120 + 60 + 'px',
                });
            }else {
                $('.item')[i].style.left = (i + 1) * 120 + 'px';
            }
        } else if(i == 3){
            $($('.item')[i]).css({
                'font-size' : '20px',
                'left' : (i + 1) * 140 + 'px',
            });
        }else $('.item')[i].style.left = (i + 1) * 120 + 130 + 'px';
    }
    setTimeout(() => {$('.item').remove();initCategoryList();},600);
}


function productDetails(object){
    $.get('/service/product_details?productId=' + $(object).val(),function(data){
        console.log(data);
    })
}
